<template>
  <div class="dialog">
    <el-dialog :title="'数据类别' + titleText" :visible.sync="showDialog" width="40%" :close-on-click-modal="false"
      @close="cancel">
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="类别名称 :" prop="dataTypeName">
          <el-input v-model="formData.dataTypeName" placeholder="请输入类别名称" clearable />
        </el-form-item>
        <el-form-item label="采控标识 :" prop="mainingControlTypeValue">
          <el-select class="w100p" filterable clearable v-model="formData.mainingControlTypeValue" placeholder="请选择">
            <el-option v-for="(item, index) in MainingControlTypeValue" :label="item.value" :value="item.value"
              :key="index + 'MainingControlTypeValue'" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="图标选择 :" >
          <uploadimage ref="UploadImage" @child-event="getimageurl" />
          <span v-if="baseImg" class="baseImg">
            <img :src="baseImg" height="40px" alt="">
            <i class="el-icon-close" @click="removeImg"></i>
          </span>
        </el-form-item> -->
        <!-- <el-form-item label="位置选择 :" >
          <div @click="innerVisible = true">
            <div v-if="!formData.xaxis">请选择位置</div>
            <div v-else-if="formData.xaxis">重新选择位置</div>
          </div>
        </el-form-item> -->
        <el-form-item label="单位 :" prop="mainingControlType">
          <el-select class="w100p" filterable clearable v-model="formData.unit" placeholder="请选择">
            <el-option v-for="(item, index) in unitList" :label="item.unitName" :value="item.unitName"
              :key="index + 'MainingControlTypeValue'" />
          </el-select>
        </el-form-item>
        <el-form-item label="值类型 :" prop="code">
          <el-select class="w100p" filterable clearable v-model="formData.valueType" placeholder="请先选择数据项">
            <el-option v-for="(item, index1) in valueType" :label="item.value" :value="item.name"
              :key="index1 + 'valueType'" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="formData.valueType === 'ENUM'" label="枚举值 :">
          <div class="valueTypeList">
            <i class="el-icon-plus icon" @click="addValue()"></i>
            <div class="hang-content">
              <div v-for="(item, index) in BOList" :key="index" class="hang-content-one">
                <el-input v-model="item.value" clearable placeholder="请填写枚举值" />
              </div>
            </div>
            <i class="el-icon-minus icon"  @click="delValue(index)"></i>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog width="1342px" title="请拖动位置" :visible.sync="innerVisible" append-to-body class="innerVis">
      <div class="pot-xy">
        <VueDragResize :x="formData.xaxis" :y="formData.yaxis" :w="300" :h="80" :is-draggable="true"
          :is-resizable="false" :parent-limitation="true" @dragstop="mczilongmet">
          <div class="mczilong">{{ formData.dataTypeName || '数据类型' }}</div>
        </VueDragResize>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="innerVisible = false">取 消</el-button>
        <el-button class="savebtn" type="primary" @click="innerVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DataTypeManageApi from "@/api/basic-info-manage/data-type-manage";
import UnitManageApi from "@/api/basic-info-manage/unit-manage";
import uploadimage from "@/components/uploadimage/uploadimage.vue";
import VueDragResize from "vue-drag-resize";
import DocumentApi from "@/api/document";
import EnumApi from "@/api/enum";
import { blobToBase64 } from "@/utils/convert";

export default {
  name: "",
  components: { uploadimage, VueDragResize },
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    nowChanceStau: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      formData: {
        xaxis: 50,
        yaxis: 50
      },
      rules: {
        dataTypeName: [
          {
            required: true,
            message: "请输入数据类别名称",
            trigger: "blur"
          },
          {
            pattern: /[a-z]|[A-Z]|[\u4e00-\u9fa5]/g,
            message: "请输入中/英文",
            trigger: "blur"
          }
        ],
        mainingControlTypeValue: [
          {
            required: true,
            message: "请选择采控标识",
            trigger: "blur"
          }
        ],
        principal: [
          {
            required: true,
            message: "请输入负责人名称",
            trigger: "blur"
          },
          {
            pattern: /[a-z]|[A-Z]|[\u4e00-\u9fa5]/g,
            message: "请输入中/英文",
            trigger: "blur"
          }
        ],
        tel: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: "blur"
          },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入合法手机号/电话号",
            trigger: "blur"
          }
        ]
      },
      // 采控标识
      MainingControlTypeValue: [],
      // 值类型
      valueType: [],
      // 单位
      unitList: [],
      showDialog: this.show,
      BOList: [{}],
      innerVisible: false,
      baseImg: '',
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
      this.$refs.UploadImage && this.$refs.UploadImage.clearImageUrl()
      this.baseImg = ''
    },
    nowChanceStau(v) {
      if (v === "add") {
        this.formData = {};
      }
      if (v === "edit") {
        this.formData = this.editObject;
        this.fileDownload(this.formData.logoFileId)
        // 坐标转Number
        this.formData.xaxis = parseInt(this.formData.xaxis);
        this.formData.yaxis = parseInt(this.formData.yaxis);
        this.formData.mainingControlTypeValue = this.formData.mainingControlTypeStr
        // 解析枚举值
        this.BOList = [];
        let temp = this.formData.enumListType ? this.formData.enumListType.split(";") : [];
        temp.forEach(item => {
          if (item) this.BOList.push({ value: item });
        });
      }
    }
  },
  created() {
    this.queryEnum();
    this.queryValueType();
    this.queryUnit();
  },
  mounted() { },
  methods: {
    queryEnum() {
      EnumApi.list({ enumType: "MainingControlType" }).then(res => {
        this.MainingControlTypeValue = res.data;
      });
    },
    queryValueType() {
      EnumApi.list({ enumType: "ValueType" }).then(res => {
        this.valueType = res.data;
      });
    },
    queryUnit() {
      UnitManageApi.queryByCondition().then(res => {
        this.unitList = res.data;
      });
    },
    // ---上传图片相关方法------
    getimageurl(e) {
      let fd = new FormData();
      fd.append("file", e);
      DocumentApi.fileUpload(fd).then(res => {
        if (res.success) {
          this.formData.logoFileId = res.data;
          this.$message.success("上传成功");
          this.baseImg = ''
        } else this.$message.error(res.message);
      });
    },
    fileDownload(fileId) {
      fileId && DocumentApi.fileDownload({ fileId }).then(res => {
        blobToBase64(res).then(response => {
          this.baseImg = response;
        });
      })
    },
    // 更新数据类别定位
    mczilongmet(e) {
      this.formData.xaxis = e.left;
      this.formData.yaxis = e.top;
    },
    // 点击添加按按钮
    addValue() {
      let list = {
        value: ""
      };
      this.$set(this.BOList, this.BOList.length, list);
      this.BOList = [...this.BOList];
    },
    // 删除改行
    delValue(index) {
      this.BOList.splice(index, 1);
    },
    removeImg() {
      this.baseImg = ''
      this.formData.logoFileId = null
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          // 处理枚举值
          if (this.formData.valueType === "ENUM") {
            let enumListType = "";
            this.BOList.forEach((item, index) => {
              if (item.value) {
                enumListType += item.value + ';'
              }
            });
            this.formData.enumListType = enumListType.substring(0, enumListType.length - 1);
          }
          if (this.nowChanceStau === "edit") {
            DataTypeManageApi.edit(this.formData).then(res => {
              if (res.success) {
                this.$message.success("修改成功！");
                this.baseImg = ''
                this.close();
              } else {
                this.$message.error(res.message);
              }
            });
          } else if (this.nowChanceStau === "add") {
            this.formData.whetherAutomatic = false;
            DataTypeManageApi.add(this.formData).then(res => {
              if (res.success) {
                this.$message.success("添加成功");
                this.baseImg = ''
                this.close();
              } else {
                this.$message.error(res.message);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    close() {
      this.$emit("closeDialog");
      this.address = [];
    },
    cancel() {
      this.$emit("cancelDialog");
      this.address = [];
      this.$refs.ruleForm.resetFields()
    }
  }
};
</script>

<style lang="scss" scoped>
.line-click {
  width: 25px;
  height: 25px;
  // background-color: aqua;
  display: flex;
  justify-content: center;
  align-items: center;
  border: snow 1px solid;
  border-radius: 50%;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: 5px;
  color: #fff;
  background-color: #003947;
  cursor: pointer;
}

.hang-content {
  width: calc(100% - 100px);

  .hang-content-one {
    width: 100%;
    display: flex;
  }
}

.pot-xy {
  width: 1300px;
  max-width: 1300px;
  height: 600px;
  min-height: 600px;
  background-image: url("~@/assets/oth-img/fish-pond-background.png");
  background-repeat: no-repeat;
  background-position: top;
  background-size: 1300px 100%;
  position: relative;

  .mczilong {
    height: 80px;
    line-height: 80px;
    background-color: #1fce4b;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 20px;
  }
}

.el-form {
  margin-top: 10px;
}

.baseImg {
  position: relative;
  height: 40px;

  i {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
  }
}

.valueTypeList {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;

  .icon {
    width: 30px;
    height: 30px;
    background-color: #0b66ac;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    color: #fff
  }
}
</style>
